<template>
  <div id="peopleHub" class="li">
    <img :src="item.imgSrc">
    <div class="revise_wrap" v-if="show">
      <div class="contact_info">
        <h1 class="name">{{ item.name }}</h1>
        <p class="tel">{{ item.tel }}</p>
      </div>
      <div class="button_group">
        <button class="edit" @click="show=false"><i class="fa fa-edit"></i></button>
        <button class="del" @click="REMOVE(item.id)"><i class="fa fa-trash-o"></i></button>
      </div>
    </div>
    <div class="save_wrap" v-else>
      <div class="contact_info">
        <input type="text" class="name" v-model="name">
        <input type="text" class="tel" v-model="tel">
      </div>
      <div class="button_group">
        <button class="save" @click="SAVE(item)"><i class="fa fa-check"></i></button>
        <button class="return" @click="RETURN"><i class="fa fa-times"></i></button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  name: 'peopleHub',
  props: [ 'item' ],
  data() {
    return {
      show: true,
      name: this.item.name,
      tel: this.item.tel,
      oldName: this.item.name,
      oldTel: this.item.tel
    }
  },
  methods: {
    ...mapActions([ 'userRemove', 'userChange' ]),
    REMOVE(id) {
      this.userRemove(id)
    },
    SAVE(item) {
      this.show = true
      this.userChange({
        id: item.id,
        name: this.name,
        tel: this.tel
      })
    },
    RETURN() {
      this.show = true
    }
  }
}
</script>

<style lang="less" scoped>
.li {
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 5px;
  display: flex;
  align-items: center;
  margin-right: 5px;
  margin-bottom: 25px;
  img {
    width: 50px;
    height: 50px;
    margin-right: 2px;
  }
  .revise_wrap,
  .save_wrap {
    display: flex;
    align-items: center;
    .contact_info {
      margin-right: 10px;
      display: flex;
      flex-direction: column;
      .name {
        font-size: 18px;
        max-width: 85px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
      .tel {
        font-size: 15px;
        max-width: 85px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      input {
        border: 0;
      }
    }
    .button_group {
      opacity: 0;
      button {
        margin: 3px;
        background: none;
        border: none;
        font-size: 20px;
        cursor: pointer;
      }
      .save,
      .edit,
      .return {
        color: #0f88eb;
      }
      .del {
        color: rgb(216, 17, 17);
      }
    }
  }
}
.li:hover {
  border: 1px solid #0f88eb;
}
.li:hover .button_group {
  opacity: 1;
}
.li.active {
  border: 1px solid #0f88eb;
}
.li.active .button_group {
  opacity: 1;
}
</style>